import React, { useEffect, useState, useRef } from 'react'


import useCountDown from './useCountDown'


// 思路
// 定义两个state:
// canSend: 初始为true，倒计时期间为false，绑定给按钮的 disabled属性
// count： 初始为0，点击按钮之后count置为60，绑定给文字
// 点击按钮之后：
// canSend改成false
// 开启定时器setInterval
// #基本实现
export default function UseTimeCom () {

    const { count, start } = useCountDown(10, () => {
        setCanSend(true)
    })
    const [canSend, setCanSend] = useState(true)

    const send = () => {
        setCanSend(false)
        start(5) // 多少秒倒计时

    }

    return (
        <div>UseTimeCom

            <div>
                <button disabled={!canSend} onClick={send}>
                    {canSend ? '发送验证码' : count + '秒之后再发送'}
                </button>

                {/* <div>'发送验证码' : {count} + '秒之后再发送'</div> */}
            </div>

        </div>
    )
}
